<template>
    <p>Has published books:{{ author.books.length}}</p>
    <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
    <p>Has published books:</p>
    <span>{{ publishedBooksMessage }}computed</span>
    <p>Has published books:</p>
    <span>{{ books() }}books()</span>
    <button @click="author.books.pop()">Add book</button>
    <hr  />
    now: {{ now }}
    <input v-model="firstName" />
    <input v-model="lastName" />
    <input v-model="fullName" />
</template>
<script>
export default {
    name: 'lesson2',
    data() {
        return {
            author: {
                name: 'John Doe',
                books: [
                'Vue 2 - Advanced Guide',
                'Vue 3 - Basic Guide',
                'Vue 4 - The Mystery'
                ]
            },
            firstName: 'John',
            lastName: 'Doe'
        }
    },
    computed: {
        // a computed getter
        publishedBooksMessage() {
            // `this` points to the vm instance
            return this.author.books.length > 0 ? 'Yes' : 'No'
        },
        now() {
            return Date.now()
        },
        fullName: {
            // getter
            get() {
                return this.firstName + ' ' + this.lastName
            },
            // setter
            set(newValue) {
                // 注意：我们这里使用的是解构赋值语法
                [this.firstName, this.lastName] = newValue.split(' ')
            }
        }

    },
    methods: {
        books() {
             return this.author.books.length > 0 ? 'Yes' : 'No'
        },
    },
    mounted() {

    }
}
</script>
<style scoped>

</style>